
import React from 'react';
import { Link } from 'react-router-dom';
import { GroupName } from '../types.ts';
import { TrophyIcon } from './icons/TrophyIcon.tsx';

interface ResultModalProps {
  isOpen: boolean;
  onClose: () => void;
  result: { name: string; group: GroupName } | null;
}

// 动态生成组样式的函数
const getGroupStyle = (group: GroupName) => {
  const colorMap = [
    { text: 'text-red-400', bg: 'bg-red-500/10' },
    { text: 'text-blue-400', bg: 'bg-blue-500/10' },
    { text: 'text-green-400', bg: 'bg-green-500/10' },
    { text: 'text-yellow-400', bg: 'bg-yellow-500/10' },
    { text: 'text-purple-400', bg: 'bg-purple-500/10' },
    { text: 'text-pink-400', bg: 'bg-pink-500/10' },
    { text: 'text-cyan-400', bg: 'bg-cyan-500/10' },
    { text: 'text-lime-400', bg: 'bg-lime-500/10' },
  ];

  // 根据组名的字符码计算索引，确保同一组名总是得到相同的颜色
  const index = group.charCodeAt(0) % colorMap.length;
  return colorMap[index];
};

const ResultModal: React.FC<ResultModalProps> = ({ isOpen, onClose, result }) => {
  if (!isOpen || !result) {
    return null;
  }

  const { name, group } = result;
  const style = getGroupStyle(group);

  return (
    <div 
      className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in-fast" 
      onClick={onClose}
    >
      <div 
        className="bg-slate-800 rounded-xl shadow-2xl w-full max-w-md m-4 border border-slate-700 transform animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-8 text-center">
            <div className="flex justify-center mb-4">
                <TrophyIcon className="w-16 h-16 text-yellow-400" />
            </div>
            <h2 className="text-2xl font-bold text-white mb-2">恭喜, {name}!</h2>
            <p className="text-slate-400 mb-6">您已成功加入小组。</p>

            <div className={`p-4 rounded-lg ${style.bg}`}>
                <p className="text-lg text-slate-300">您被分配到</p>
                <p className={`text-5xl font-bold ${style.text} tracking-wider`}>{group}组</p>
            </div>

            <div className="mt-8">
                <Link
                  to="/groups"
                  className="block w-full px-6 py-3 rounded-md text-white font-semibold bg-blue-600 hover:bg-blue-700 transition text-center"
                  onClick={onClose}
                >
                  查看分组情况
                </Link>
            </div>
        </div>
      </div>
    </div>
  );
};

export default ResultModal;